<template>
	<div class="bookdetail">
		<div class="hd">
			<div class="kk">
				<router-link to="/mobile/home"><i class="el-icon-back"></i></router-link>

				<h4>书本详情</h4>

			</div>
			<hr />
			<ul class="uls">
				<h3>书名:{{book.name}}</h3>
				<li><i class="el-icon-s-goods"></i></li>
				<li><i class="el-icon-star-off"></i></li>
				<br />
				<li><span>月销量:{{book.salenum}}</span></li>
			</ul>
		</div>
		<div class="bodys">
			<table>
				<tr>
					<td>书本序号:</td>
					<td>{{book.sn}}</td>
				</tr>
				<tr>
					<td>作者:</td>
					<td>{{book.author}}</td>
				</tr>
				<tr>
					<td>出版社:</td>
					<td>{{book.maker}}</td>
				</tr>

			</table>
		</div>
		<div class="kokoko">
			<img :src="`${$ip}/api/public/showimg/${book.pic}`" />
		</div>
		<div style="margin: 0 auto; width: 30%;">
			<el-button @click="goorder()" style="width: 100%;">立即购买</el-button>
		</div>
		<details>
			<summary>简介详情</summary>
			<p>{{book.info}}</p>
		</details>
		<hr />
		<div class="foott">
			<h4>网友点评</h4>
			<div style="display: flex; width: 90%; margin: 0 auto;">
				<div style="margin-top: 1rem;">
					<img style="border-radius: 50%;" :src="`${$ip}/api/public/showimg/${s}`" />
				</div>
				<div style=" margin-left: 2%; width: 100%;">
					<el-rate style="margin-top: 2%;" v-model="rates"></el-rate>
					<div style="display: flex;">
						<el-input type="textarea" autosize placeholder="请输入内容" v-model="speak">
						</el-input><el-button style="margin-top: -0.5rem;" @click="ok()">确定</el-button>
					</div>
				</div>
			</div>

			<div v-for="item in list" class="vlist">
				<img :src="`${$ip}/api/public/showimg/${item.img}`" />
				<div style="margin-top: 0.5rem;">
					<ul>
						<li>{{item.nickname}}&nbsp;&nbsp;{{item.tpost}}</li>
						<li>{{item.content}}</li>
						<li> <el-rate disabled :value="item.rate"></el-rate></li>
					</ul>

				</div>
			</div>
		</div>
		<hr />
		<div class="db">
			<p>Copyright@ 2015-2025 Dianying.com</p>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'bookdetail',
		data() {
			return {
				book: {},
				ids: 0,
				list: [],
				s: '',
				rates: 0,
				speak: '',
				user: {}


			}
		},
		components: {

		},
		methods: {
			ok() {
				console.log(this.rates);
				console.log(this.speak);

				if (window.localStorage.getItem('token') != null) {
					this.user = {
						content: this.speak,
						rate: this.rates
					}
				} else {
					this.$message.error('当前未登录');
				}
				this.$postkv('/api/public/rate/add/' + this.ids, this.user).then((resp) => {
					console.log(resp.data.data);
					this.show();
				})

				this.rates = 0;
				this.speak = null;

			},
			goorder() {
				console.log(this.ids);
				this.$get('/api/public/addCart/' + this.ids).then((resp) => {
					console.log(resp.data.data);
					if (resp.data.data == 0) {
						this.$message.error('当前未登录');
					}
				})
			},
			show() {
				this.$get('/api/public/rate/findByBookid/' + this.ids + "/" + 1 + "/" + 10).then((
					resp) => {
					console.log(resp.data.data);
					this.list = resp.data.data.comments;
					console.log(this.list);
				})
			}
		},
		mounted() {
			let str = this.$route.path.split("/")
			let id = str[3];
			this.ids = id;
			console.log("路由参数获取到的id:" + id);

			this.$get("/api/public/book/findById/" + id).then((resp) => {
				this.book = resp.data.data;
				console.log(this.book);
			})
			this.show();
			this.s = window.localStorage.getItem('img')
		}
	}
</script>

<style scoped>
	.kokoko {
		background-color: black;
		width: 40%;
		height: 250px;
		margin: 0 auto;
	}

	.kokoko img {
		width: 100%;
		height: 100%;
	}

	.bookdetail {

		margin: 0 auto;
		margin-top: -3.5rem;
		width: 100%;
		height: 100%;
		background-color: #6f6f6f;

	}

	.bookdetail details {
		color: white;
		margin-left: 1.25rem;
	}


	.db {
		color: white;
		text-align: center;

	}

	.kk i {
		color: white;

	}

	.bookdetail button {
		font-size: 20px;

		border: none;
		background-color: #6f6f6f;
		color: white;
	}

	.hd h4 {
		line-height: 20px;
		text-align: center;
		color: white;

	}

	.uls {
		/* background-color: #C7AEF8; */
		text-align: center;
	}

	.uls h3 {
		color: white;
		text-align: left;
		position: relative;
		top: 0.625rem;
		left: 0.9375rem;
	}

	.uls li {
		color: white;
		text-align: right;
		display: inline;
		position: relative;
		top: -0.9375rem;
		right: -140px;
	}

	.uls span {

		color: white;
	}

	.bodys table {
		font-size: 1rem;
		line-height: 1.375rem;
		color: white;
	}

	.foott h4 {
		color: white;
		margin-top: 20px;
		margin-left: 0.9375rem;
	}

	.foott img {
		width: 3rem;
		height: 3rem;
	}

	.vlist {
		width: 90%;
		margin: 0 auto;
		margin-top: 3rem;

		display: flex;
	}

	.vlist img {
		width: 5rem;
		height: 5rem;
		border-radius: 50%;
	}
</style>